<script lang="ts" setup>
import { showSuccessToast, showFailToast } from 'vant';
import {addressstep} from '@/api/setup'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

const id = ref(Number(window.localStorage.getItem('addId'))+1+'')
const name = ref('')
const tel = ref('')
const address = ref('')
// 正则校验
const named = /^(?:[\u4e00-\u9fa5·]{2,16})$/
const teld = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/

function onSubmit(){
    if(!named.test(name.value)||!teld.test(tel.value)){
        return showFailToast('信息格式有误') 
    }

    addressstep({id:id.value,name:name.value,tel:tel.value,address:address.value}).then(res=>{
        // console.log(res)
        if(res.data.code!=='200'){
            return showFailToast(res.data.message)
        }
        showSuccessToast(res.data.message)
        router.push('/setup/address')
    })
}
</script>

<template>
    <van-nav-bar title="新增地址" left-text="返回" left-arrow @click-left="router.back()" />
    <div class="boxset">
        <!-- 导航栏 -->

        <!-- 表单 -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="name" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="tel" name="电话号码" label="电话号码" placeholder="电话号码"
                    :rules="[{ required: true, message: '请填写电话号码' }]" />
                <van-field v-model="address" name="地址" label="地址" placeholder="地址"
                    :rules="[{ required: true, message: '请填写地址' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}
</style>